import { Form, Input, Modal, message } from "antd";
import { useEffect, useState } from "react";
import { getConnectionApi, getToken } from "../utils/client";
import { getMinAppInfo } from "@linksaas-minapp/api";
import { SqlServerInfo } from "@linksaas-minapp/api/extra_info";

export interface ConnModalProps {
    onCancel: () => void;
    onOk: (id: string, name: string, dataSource: string) => void;
}

function ConnModal(props: ConnModalProps) {
    const [name, setName] = useState("");
    const [host, setHost] = useState("");
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");

    const connect = async () => {
        const client = getConnectionApi();
        const dataSource = `postgres://${encodeURIComponent(username)}:${encodeURIComponent(password)}@${host}/?sslmode=disable`;
        const showDataSource = `postgres://${encodeURIComponent(username)}:******@${host}/?sslmode=disable`;
        try {
            const res = await client.connectionOpenPost({
                connectionOpenPostRequest: {
                    token: getToken(),
                    name: name.trim(),
                    driver: "postgres",
                    dataSource: dataSource,
                },
            });
            props.onOk(res, name.trim(), showDataSource);
            message.info("连接成功");
        } catch (e) {
            console.log(e);
            message.error("无法连接");
            return;
        }
    };

    useEffect(() => {
        const minAppInfo = getMinAppInfo();
        if (minAppInfo == undefined) {
            return;
        }
        if (minAppInfo.extraInfo != undefined && minAppInfo.extraInfo.length > 0) {
            const serverInfo = JSON.parse(minAppInfo.extraInfo) as SqlServerInfo;
            setName(minAppInfo.extraInfoName ?? "");
            setHost(serverInfo.addr ?? "");
            setUsername(serverInfo.username ?? "");
            setPassword(serverInfo.password ?? "");
        }
    }, []);

    return (
        <Modal open title="连接postgres数据库"
            bodyStyle={{ maxHeight: "calc(100vh - 300px)", overflowY: "auto", paddingRight: "20px" }}
            okText="连接" okButtonProps={{ disabled: name.trim() == "" || host.trim() == "" || username.trim() == "" || password.trim() == "" }}
            onCancel={e => {
                e.stopPropagation();
                e.preventDefault();
                props.onCancel();
            }}
            onOk={e => {
                e.stopPropagation();
                e.preventDefault();
                connect();
            }}
        >
            <Form labelCol={{ span: 5 }}>
                <Form.Item label="名称">
                    <Input value={name} onChange={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        setName(e.target.value);
                    }} />
                </Form.Item>
                <Form.Item label="地址">
                    <Input value={host} onChange={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        setHost(e.target.value);
                    }} />
                </Form.Item>
                <Form.Item label="用户名">
                    <Input value={username} onChange={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        setUsername(e.target.value);
                    }} />
                </Form.Item>
                <Form.Item label="密码">
                    <Input.Password value={password} onChange={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        setPassword(e.target.value);
                    }} />
                </Form.Item>

            </Form>
        </Modal>
    );
}

export default ConnModal;